<template>
	<view>
		<common-header id="header"></common-header>
		<view class="list">
			<scroll-list class="data_list" ref="list" :option="option" @load="load" @refresh="refresh">
				<view class="list-item" v-for="(item, index) in list" :key="index" @click="handleTest">
					<view class="k_info">
						<view class="img_info">
							<image class="good_img" src="../../static/fumou-center-template/header.jpg"></image>
							<view class="good_peice" style=""><span class="je">120</span>元/吨</view>
						</view>

						<view class="good_item_info">
							<view class="good_name">商品名称商品名称商品名称商品名称商品名称商品名称</view>
							<view class="good_desc">商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述</view>
							<view class="good_label">
								<span>AAA</span>
								<span>BBB</span>
								<span>CCCCC</span>
								<span>AAA</span>
								<span>BBB</span>
								<span>CCCCC</span>
								<span>AAA</span>
								<span>BBB</span>
								<span>CCCCC</span>
							</view>
							<view style="display: flex;">
								<view class="good_address">北京市朝阳区酒仙桥地区</view>
								<view class="good_time">10分钟前</view>
							</view>
						</view>
					</view>
				</view>
			</scroll-list>
		</view>
	</view>

</template>

<script>
	import commonHeader from '@/components/common-header/common-header.vue'
	import scrollList from '@/components/scroll-list/scroll-list.vue'
	export default {
		components: {
			commonHeader,
			scrollList
		},
		data() {
			return {
				list: []
			}
		},
		onHide() {},
		methods: {
			// 加载数据
			load() {
				for (var i = 0; i < 1; i++) {
					this.list.push(new Date());
				}
				// 加载成功  参数对象{list: 当前列表,total: 数据总长度(后端查询的total)}
				this.$refs.list.loadSuccess({
					list: this.list,
					total: 1
				});
				// 加载失败
				// this.$refs.list.loadFail()
			},
			// 刷新刷剧
			refresh() {
				setTimeout(() => {
					for (var i = 0; i < 1; i++) {
						this.list.push(i);
					}
					// 刷新成功  参数对象{list: 当前列表,total: 数据总长度(后端查询的total)}
					this.$refs.list.refreshSuccess({
						list: this.list,
						total: 20
					});
					// 刷新失败
					// this.$refs.list.refreshFail()
				}, 200);
			}
		}
	}
</script>

<style scoped>
	#header {
		position: sticky;
		top: 0rpx;
	}

	.avatar {
		height: 200rpx;
		background-color: #4CD964;
		margin: 40rpx 20rpx;
		border-radius: 20rpx;
	}

	.list {
		margin-top: 80rpx;
		width: 100vw;
	}

	.k_info {
		display: flex;
		margin: 20rpx 20rpx;
	}

	.good_item_info {
		margin-left: 20rpx;
	}

	.img_info {
		position: relative;
	}

	.good_img {
		height: 120px;
		width: 120px;
		border-radius: 10%;
	}

	.good_peice {
		z-index: 999;
		border-radius: 20rpx;
		background-color: rgba(192, 192, 192, .8);
		position: absolute;
		width: 120px;
		color: white;
		font-weight: 900;
		text-align: left;
		height: 60rpx;
		line-height: 60rpx;
		top: 0;
	}

	.good_name {
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box; //作为弹性伸缩盒子模型显示。
		-webkit-box-orient: vertical; //设置伸缩盒子的子元素排列方式--从上到下垂直排列
		-webkit-line-clamp: 2; //显示的行
		color: #333333;
		font-weight: 600;
		font-size: 0.9rem;
		height: 80rpx;
		text-align: left;
	}

	.good_desc {
		height: 70rpx;
		height: 60rpx;
		margin-top: 10rpx;
		font-size: 0.7rem;
		color: #999999;
		font-weight: 600;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box; //作为弹性伸缩盒子模型显示。
		-webkit-box-orient: vertical; //设置伸缩盒子的子元素排列方式--从上到下垂直排列
		-webkit-line-clamp: 2; //显示的行
	}

	.good_label {
		width: 400rpx;
		overflow: hidden;
		height: 40rpx;
	}

	.good_label span {
		text-align: center;
		font-size: 0.7rem;
		color: #999999;
		font-weight: 600;
		width: 20prx;
		height: 40rpx;
		color: white;
		background-color: #39BF3E;
		border-radius: 10%;
		margin: 0 5rpx;
	}

	.good_address {
		flex: 3;
		margin-top: 10rpx;
		font-size: 0.7rem;
		color: #999999;
		font-weight: 600;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box; //作为弹性伸缩盒子模型显示。
		-webkit-box-orient: vertical; //设置伸缩盒子的子元素排列方式--从上到下垂直排列
		-webkit-line-clamp: 2; //显示的行

	}

	.good_time {
		margin-top: 10rpx;
		font-size: 0.8rem;
		color: #999999;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box; //作为弹性伸缩盒子模型显示。
		-webkit-box-orient: vertical; //设置伸缩盒子的子元素排列方式--从上到下垂直排列
		-webkit-line-clamp: 2; //显示的行
	}

	.je {
		color: red
	}
</style>
